<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      html, body {
          height: 100%;
          margin: 0;
          padding: 0;
      }

      .container {
          display: grid;
          height: 100%;
          /* 前两列宽度 100px，第三列自适应宽度，第四列宽100px */
          grid-template-columns: repeat(2, 100px) auto 100px;
          /* 前两行高度 100px，第三行自适应高度，第四行高100px */
          grid-template-rows: repeat(2, 100px) auto 100px;

          grid-template-areas:
                  'header header header header'
                  'menu main main right'
                  'menu main main right'
                  'menu footer footer footer'
      }

      .container > div {
          border: 1px solid red;
      }

      .item1 { grid-area: header; }
      .item2 { grid-area: menu; }
      .item3 { grid-area: main; }
      .item4 { grid-area: right; }
      .item5 { grid-area: footer; }
  </style>
</head>
<body>
<div class="container">
  <div class="item1">Header</div>
  <div class="item2">Menu</div>
  <div class="item3">Main</div>
  <div class="item4">Right</div>
  <div class="item5">Footer</div>
</div>
</body>
</html>